<script>
import MyCart from "@/components/my-cart.vue";
import router from "@/router/index.js";
import AddButton from "@/components/add-button.vue";

export default {
  name: "water-item",
  components: {AddButton},
  // components: {MyCart},
  props: { // 自定义属性
    info: {
      type: Object,
      default: {
        'img': 'https://img1.baidu.com/it/u=1818314105,4047054563&fm=253&fmt=auto&app=138&f=JPEG?w=256&h=256',
        'title': '~~~',
        'price': 0,
        'oldPrice': 0
      },
      required: true
    }
    // waterName: {
    //   default: 'myWater',
    //   type: String,
    // },
    // imgUrl: {
    //   default: 'https://img1.baidu.com/it/u=1818314105,4047054563&fm=253&fmt=auto&app=138&f=JPEG?w=256&h=256',
    //   type: String
    // },
    // price: {
    //   default: 0,
    //   type: Number
    // },
    // oldPrice: {
    //   default: 0,
    //   type: Number
    // }
  },
  data() {
    return {
      num: 1,
      totalAmount: this.info.price,
    };
  },
  methods: {
    waterDetail() {
      // alert('细情页面')
      router.push({path: '/test'})
    },
    buy() {
      // if (this.num > 1)
      // alert('先选择想买的购物')
      alert('购买页面')
    },
    tuck() {
      alert('收藏成功')
    },
    changeNum(e) {
      this.num = e;
    },
    // 购买数量
    // minus() {
    //   if (this.num > 1) this.num--
    // },
    // plus() {
    //   this.num++
    // },
    changTotalAmount(val, oldval) {
      // console.log('val:', val)
      // console.log('oldval:', oldval)
      this.totalAmount = val * this.info.price
    }
  },
  watch: {
    num: 'changTotalAmount'
  },
  computed: {
    // totalAmount() {
    //   return this.num * this.price
    // }
  }
}
</script>

<template>
  <div class="water-item-box" @click="waterDetail">
    <img :src="info.img">

    <div style="flex: 1">
      <div style="display: flex">
        <h3 style="flex: 1">{{ info.title }}</h3>
        <slot name="top-right"></slot>
      </div>

      <p style="color: red">
        <del style="color: gray">{{ info.oldPrice }}</del>
        {{ info.price }}
      </p>

      <button class="btn" @click.stop="buy">购买</button>
      <button class="btn" id="btn" @click.stop="tuck">收藏</button>
      <span>总价格：<span id="span">{{ totalAmount.toFixed(2) }}</span></span>
      <!--            购买数量-->
      <!--            <div class="number-box">-->
      <!--              <button @click.stop="minus">-</button>-->
      <!--              <p>{{ num }}</p>-->
      <!--              <button @click.stop="plus">+</button>-->
      <!--            </div>-->
      <!--      <my-cart/>-->

      <add-button @change="changeNum" :num="num"/>
      <!--      @minus="minus" @plus="plus"-->
    </div>
  </div>

</template>

<style scoped>
.water-item-box {
  display: flex;
  padding: 20px;
  margin: 20px;
  border-radius: 10px;
  background: white;
  box-shadow: 0 0 5px 0 gray;

  img {
    width: 100px;
    height: 100px;
    margin: auto;
    padding: 0 15px 0 0;
  }
}

#btn {
  border: 2px solid #ff9900;
}

.btn {
  margin-right: 15px;
  background: none;
  border: 2px solid #2c9d00;
  border-radius: 5px;
}

#span {
  color: #2c9d00;
}
</style>